<template>
  <div class="text-mode-box">
    <div class="DomHeight" ref="DomHeight">{{ props.data }}</div>
    <div v-if="isBtn" class="text-mode-eil" :class="'text-mode-eil' + store.styleInfo.colorType">
      <van-text-ellipsis :rows="props.maxLen" :content="props.data" expand-text="全部" collapse-text="全部" />
      <div class="text-mode-eil-flot">
        <span @click="showModel">全部</span>
      </div>
    </div>
    <div v-else class="text-mode-all">
      <span :style="{ color: props.color }">{{ props.data }}</span>
    </div>
  </div>
  <!-- <span style="margin-top: 0px"> 
    <span v-if="data.length < maxLen">
      <span
        class="tj"
        :style="{
          fontFamily: 'PingFangSC, PingFang SC',
          color: props.color,
          fontSize: store.styleInfo.contentSize,
        }"
        >{{ props.data }}</span
      >
    </span>
    <span v-else>
      <span
        :style="{
          fontFamily: 'PingFangSC, PingFang SC',
          color: props.color,
          fontSize: store.styleInfo.contentSize,
        }"
        class="tj"
        >{{ showBtn ? sliceStr : props.data }}
        <span
          :style="{
            color: getColor(),
            fontSize: store.styleInfo.contentSize,
          }"
          class="btnWord"
          style="font-family: PingFangSC-Regular, PingFang SC"
          @click="showModel"
          >{{ showBtn ? tip : '收起' }}</span
        >
      </span>
    </span>
  </span> -->
  <div class="dialog-box-style-parent" :class="'dialog-box-style' + store.styleInfo.colorType">
    <t-dialog v-model:visible="textVisible" :header="props.title">
      <!-- v-html="props.data" -->
      <div v-if="textVisible" class="tj text-body-item">
        <div class="text-body-item-heard">
          <span>{{ props.title }}</span>
          <i class="doorIcon" @click="textVisible = false">&#xe63d;</i>
        </div>
        <div class="text-body-item-content">
          <textMaxMode :remarks="getTextHtml(props.data)" />
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { TextEllipsis } from 'vant';
import textMaxMode from './textMaxMode.vue';
import { publicUrls, getTextHtml } from '@/utils/minxin';
import { colorList5 } from '../../data';
import { computed, ref, watch, onActivated, nextTick, onMounted } from 'vue';
import { useProjectStore } from '@/store';

const isBtn = ref(false);
const DomHeight = ref(null);
const textVisible = ref(false);
const store = useProjectStore();
const showBtn = ref(true);
const props = defineProps({
  tip: {
    type: String,
    default: '全部',
  },
  modelData: {
    type: String,
    default: '暂无内容',
  },
  color: {
    type: String,
    default: '#fff',
  },
  // 数据
  title: {
    type: String,
    default: '',
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
  // 最大长度
  maxLen: {
    type: Number,
    default: 3,
  },
  flag: {
    type: Boolean,
    default: true,
  },
});
const showModel = () => {
  textVisible.value = true;
  // showBtn.value = !showBtn.value;
};
const sliceStr = computed(() => {
  if (props.data != null) {
    return props.data.substring(0, props.maxLen) + '...';
  }
  return '';
});

const getColor = () => {
  if (!props.flag) {
    return colorList5[store.styleInfo.colorType - 1].themeColor;
  } else {
    return colorList5[store.styleInfo.colorType - 1].shmentColor;
  }
};

onMounted(() => {
  if (!props.data && !DomHeight.value) {
    return;
  }
  //判断虚拟文本dom是否高于容器dom
  // alert(DomHeight.value.offsetHeight);
  setTimeout(() => {
    if (!props.data) {
      return;
    }
    //判断虚拟文本dom是否高于容器dom
    if (DomHeight.value.offsetHeight > props.maxLen * 32) {
      isBtn.value = true;
    } else {
      isBtn.value = false;
    }
    DomHeight.value.style.display = 'none';
    // alert(DomHeight.value.offsetHeight);
    // alert(props.maxLen * 32);
    // alert(isBtn.value);
  }, 50);
  //   获取完高度后关闭虚拟dom

  // 监听内容动态切换，重新判断高度
});
watch(
  () => props.data,
  () => {
    if (!props.data && !DomHeight.value) {
      return;
    }
    textVisible.value = false;
    // DomHeight.value.style.display = 'block';
    setTimeout(() => {
      //判断虚拟文本dom是否高于容器dom
      if (DomHeight.value.offsetHeight > props.maxLen * 32) {
        isBtn.value = true;
      } else {
        isBtn.value = false;
      }
      // DomHeight.value.style.display = 'none';
    }, 50);
  },
);
watch(
  () => props.flag,
  () => {
    console.log(props.flag);

    getColor();
  },
  { deep: true, immediate: true },
);
</script>

<style lang="less" scoped>
.btnWord {
  cursor: pointer;
  color: #d2ad77;
  font-weight: 400;
  line-height: 32px;
}

.text-body-item {
  display: flex;
  flex-direction: column;
  text-indent: 2em;
  height: 70vh;
  width: 82vw;
  padding: 80px;
  padding-top: 40px;
  background-image: url('@/assets/templateImg/template5tkbg1.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.text-body-item-heard {
  position: relative;
  display: flex;
  justify-content: center;
  font-family: 'SourceHanSerifCN-Bold';
  font-size: 34px;
  color: #443c2e;
  line-height: 52px;
  text-align: center;
  margin-bottom: 32px;
  .doorIcon {
    cursor: pointer;
    position: absolute;
    top: -15px;
    right: -50px;
    font-size: 16px;
    line-height: 16px;
  }
}
.text-body-item-content {
  width: 100%;
  flex: 1;
}
.text-body-item::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0.2);
}
.text-body-item::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.7);
}
.text-body-item::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.dialog-box-style-parent {
  position: fixed;
  z-index: 12000 !important;
  :deep(.t-dialog__ctx.t-dialog__ctx--fixed) {
    z-index: 12000 !important;
  }
  :deep(.t-dialog) {
    height: 70vh !important;
    width: 82vw !important;
  }
  :deep(.t-dialog__body) {
    padding: 0px;
  }
  :deep(.t-dialog__footer) {
    display: none;
  }
  :deep(.t-dialog__header) {
    display: none;
  }
}
.dialog-box-style1 {
  :deep(.t-dialog) {
    background: #452e20;
    border: none;
  }
  // :deep(.doorIcon) {
  //   color: #e9d5b0;
  // }
  :deep(.t-dialog__close) {
    .t-icon {
      font-size: 30px;
      color: #e9d5b0;
    }
  }
}
.dialog-box-style2 {
  :deep(.t-dialog) {
    background: #8c7a57;
    border: none;
  }
  :deep(.t-dialog__header) {
    color: #cbb995;
  }
  // :deep(.doorIcon) {
  //   color: #cbb995;
  // }
  :deep(.t-dialog__close) {
    .t-icon {
      font-size: 30px;
      color: #cbb995;
    }
  }
}
.dialog-box-style3 {
  :deep(.t-dialog) {
    background: #353c48;
    border: none;
  }
  // :deep(.doorIcon) {
  //   color: #e9d5b0;
  // }
  :deep(.t-dialog__header) {
    color: #e9d5b0;
  }
  :deep(.t-dialog__close) {
    .t-icon {
      font-size: 30px;
      color: #e9d5b0;
    }
  }
}
.text-mode-box {
  position: relative;
  width: 100%;
}
.DomHeight {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -99;
  width: 100%;
  text-indent: 2em;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  text-align: justify;
  text-indent: 2em;
}
.text-mode-all {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  text-align: justify;
  text-indent: 2em;
}
.text-mode-eil {
  width: 100%;
  position: relative;
  :deep(.van-text-ellipsis) {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    text-align: justify;
    text-indent: 2em;
  }
  :deep(.van-text-ellipsis__action) {
    display: none;
    opacity: 0;
  }
}
.text-mode-eil-flot {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  span {
    cursor: pointer;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
  }
}
.text-mode-eil1 {
  :deep(.van-text-ellipsis) {
    color: #e9d5b0;
  }
  .text-mode-eil-flot {
    span {
      color: #ffe0a8;
    }
  }
}
.text-mode-eil2 {
  :deep(.van-text-ellipsis) {
    color: #cbb995;
  }
  .text-mode-eil-flot {
    span {
      color: #ecc983;
    }
  }
}
.text-mode-eil3 {
  :deep(.van-text-ellipsis) {
    color: #e9d5b0;
  }
  .text-mode-eil-flot {
    span {
      color: #e1d6b8;
    }
  }
}
</style>
